<template>
  <div class="components-libs-container">
    <div v-for="(item, index) in componentsList" :key="index">
      <v-subheader v-text="item.title" />
      <div class="components-lib-list">
        <div
          v-for="(element,i) in item.components"
          :key="i"
          v-ripple
          class="components-lib-item"
          @click="handleClick(element)"
        >
          <v-icon>
            mdi-{{ element.icon }}
          </v-icon>
          <div v-text="element.title" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { camelCase } from 'lodash'
import config from './config'
import { register_components_object } from './plugins/index'

export default {
  name: 'ComponentLibs',
  data() {
    return {
      componentsList: config
    }
  },
  methods: {
    handleClick(item) {
      const props = this.getComponentProps(item.elName)
      this.$store.dispatch('h5editor/addElement', { ...item, needProps: props })
    },
    getComponentProps(elName) {
      let elComponentData
      for (const key in register_components_object) {
        if (key.toLowerCase() === camelCase(elName).toLowerCase()) {
          elComponentData = register_components_object[key]
          break
        }
      }
      if (!elComponentData) return {}
      const props = {}
      for (const key in elComponentData.props) {
        props[key] = [Object, Array].includes(elComponentData.props[key].type) ? elComponentData.props[key].default() : elComponentData.props[key].default
      }
      return props
    }
  }
}
</script>

<style lang="scss" scoped>
.components-libs-container {
  position: relative;
  padding: 10px;
  .components-lib-list {
    display: grid;
    grid-template-columns: 90px 90px;
    row-gap: 20px;
    column-gap: 10px;
    .components-lib-item {
      text-align: center;
      border: 1px solid #ddd;
      font-size: 12px;
      cursor: pointer;
      transition: All .3s ease-in-out;
      padding: 10px 0;
      box-sizing: border-box;
    }
  }
}
</style>
